<template>
  <div>
    <div style="margin: 2px;">
      <h1 style="font-size: 25px;text-align: center;">站点账号信息</h1>
      <!-- 账号状态下拉框 -->
      <el-select  style="float: left;"  @change="selectState(state)" v-model="state" clearable placeholder="选择状态">
        <el-option  v-for="sl in stateList" :key="sl.state" :label="sl.orderState" :value="sl.state">
        </el-option>
      </el-select>
      <!-- 角色下拉框 -->
      <el-select  style="float: left;"  @change="selectRole(role)" v-model="role" clearable placeholder="选择角色">
        <el-option  v-for="sl in roleList" :key="sl.role" :label="sl.siteRole" :value="sl.role">
        </el-option>
      </el-select>
      <div  style="float: left;margin-left: 578px;">
        <el-input  style="float: left; " placeholder="请输入账号" @change="seachSiteAccount" prefix-icon="el-icon-search"  v-model="siteAccount" clearable> </el-input>
      </div>
    </div>
    <!-- 账号列表 -->
    <el-table ref="multipleTable" :data="pageInfo.records" style="width: 100%;">
      <el-table-column type="index" width="40">
      </el-table-column>
      <el-table-column prop="siteAccount" label="账号" width="170">
      </el-table-column>
      <el-table-column prop="state" label="账号状态" width="160">
        <template slot-scope="scope">
          <span>{{scope.row.state==0?'正常':scope.row.state==1?'禁用':'删除'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="siteRole" label="账号角色" width="170">
        <template slot-scope="scope">
          <span>{{scope.row.siteRole==0?'超级管理员':'普通管理员'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="creatTime" label="创建时间" width="170">
      </el-table-column>
      <el-table-column prop="updateTime" label="更新时间" width="170">
      </el-table-column>
      <el-table-column prop="operator" label="操作人" width="170">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="210" >
        <template slot-scope="scope">
          <el-button  type="primary" size="small" @click="setState(scope.row,0)" style="margin: 2px;">启用</el-button>
          <el-button  type="primary" size="small" @click="setState(scope.row,1)" style="margin: 2px;">禁用</el-button>
          <el-button  type="danger" size="small"  @click="setState(scope.row,2)" style="margin: 2px;">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="pageInfo.current"
    :page-sizes="[1, 2, 3, 4]"
    :page-size="pageInfo.size"
    layout="total, sizes, prev, pager, next, jumper"
    :total="pageInfo.total">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name:'SelectSiteAccount',
    data() {
      return {
        roleList:[
          {role:'0',siteRole:'超级管理员'},
          {role:'1',siteRole:'普通管理员'},
        ],
        stateList:[
          {state:'0',orderState:'启用'},
          {state:'1',orderState:'禁用'},
          {state:'2',orderState:'删除'},
        ],
        role:'',
        state:'',
        siteAccount:'',
        pageInfo:{}
      }
    },
    methods: {
      //设置账号状态
      setState(row,state){
        this.$http.post("/site/siteAccount/setAccountState.admin",{accountId:row.accountId,state:state}).then(resp=>{
          if (resp.data.code==200) {
            this.showSiteAccount()
            alert(resp.data.message)
          } else{
            alert(resp.data.message)
          }
        })
      },

      // 分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.showSiteAccount(this.pageInfo.current, val)
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.showSiteAccount(val, this.pageInfo.size)
      },

      //搜索框
      seachSiteAccount(){
         this.comon(null,null,this.state,this.role,this.siteAccount)
      },

      //角色下拉框
      selectRole(role){
        this.comon(null,null,this.state,role,this.siteAccount)
      },

      //状态下拉框
      selectState(state){
        this.comon(null,null,state,this.role,this.siteAccount)
      },

      // 查询所有账号
      showSiteAccount(current,size){
        this.comon(size,current,this.state,this.role,this.siteAccount)
      },

      //分页查询账号（公共）
      comon(size,current,state,role,siteAccount){
        this.$http.post("/site/siteAccount/selectSuper.admin",{
          size:size,
          current:current,
          state:state,
          siteRole:role,
          siteAccount:siteAccount
        }).then(resp=>{
          if(resp.data.code==200){
            this.pageInfo = resp.data.data
          }else{
             this.pageInfo = {}
          }
        })
      }

    },
    created() {
      this.showSiteAccount()
    }
  }
</script>

<style>
</style>
